<template>
  <div id="oee">
  <!-- <el-button @click="resetDateFilter">清除日期过滤器</el-button>
  <el-button @click="clearFilter">清除所有过滤器</el-button> -->
    <div id="selection">
      <span class="demonstration">时间选择</span>
      <el-date-picker
          v-model="valuedata"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
      </el-date-picker>
      <span class="demonstration">设备级联选择</span>
      <el-cascader
        v-model="selectitem"
        :options="options"
        :props="props"
        collapse-tags
        clearable>
      </el-cascader>
      <el-button id='search' type="primary" icon="el-icon-search" @click="searchinfo">查询</el-button>
      <el-button type="primary" @click="exportToExcel">导出</el-button>
    </div>
    <el-table
    id="table"
    ref="filterTable"
    border
    :data="tableData"
    :header-cell-style="{background:'#F8F9FA',height:'20px','text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    @row-click="handleRowClick"
    style="width: 56.3125rem"
    fit>
    <el-table-column
      prop="equip_code"
      label="设备编号"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="equip_status"
      label="设备状态"
      width="180">
      <template slot-scope="scope">
        <!-- 根据 scope.row 的不同数据来返回不同的值 -->
        <span v-if="scope.row.equip_status === 1">运行</span>
        <span v-else-if="scope.row.equip_status === 2">待机</span>
        <span v-else-if="scope.row.equip_status === 7">待料</span>
        <span v-else-if="scope.row.equip_status === 8">堵料</span>
        <span v-else>未知状态</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="start_timestamp"
      label="开始时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="end_timestamp"
      label="结束时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="last_time"
      label="持续时间"
      width="180">
    </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      title="oee图形展示"
      width="70%"
    >
      <div id="chart" style="width: 100%; height: 400px"></div>
    </el-dialog>
  </div>
</template>
<style scoped>
#oee{
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  /* margin-top: 0; */
  /* background: yellow; */
}
#selection{
  height: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
}
span{
  font:15px 'Microsoft YaHei' normal;  /*字体大小，字体类型，字体风格*/
  margin: 10px;
}
#search{
  margin-left: 10px;
  width: 71px;
  height: 39px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-table {
		margin-top: 10px;
}
</style>
<script>
import axios from 'axios'
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
// import { Dialog } from 'element-ui'
import * as echarts from 'echarts'
// import XLSX from 'xlsx'
  export default {
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        xAxis: [],
        yAxis: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        pickdata:{
          starttime:'',
          endtime:'',
          selectdata:[]
        },
        valuedata: [],
        selectitem: [],
        props: { multiple: true },
        options: [{
          value: 1,
          label: '切卷',
          children: [
            {value: 'XZ2-01-01-QJ-QJ-03', label: 'XZ2-01-01-QJ-QJ-03'}, 
            {value: 'XZ2-01-02-QJ-QJ-01', label: 'XZ2-01-02-QJ-QJ-01'},
            {value: 'XZ2-01-03-QJ-QJ-01', label: 'XZ2-01-03-QJ-QJ-01'},
          ]
        },
        {
          value: 2,
          label: '预热',
          children: [
            {value: 'XZ2-01-01-ZZ-YR-01', label: 'XZ2-01-01-ZZ-YR-01'}, 
            {value: 'XZ2-01-01-ZZ-YR-02', label: 'XZ2-01-01-ZZ-YR-02'},
          ]
        },
        {
          value: 3,
          label: '检测机',
          children: [
            {value: 'XZ2-01-01-ZZ-JC-02', label: 'XZ2-01-01-ZZ-JC-02'}, 
            {value: 'XZ2-01-02-ZZ-JC-02', label: 'XZ2-01-02-ZZ-JC-02'},
          ]
        },
        {
          value: 4,
          label: '包胶入壳',
          children: [
            {value: 'XZ2-01-01-ZZ-BJ-01', label: 'XZ2-01-01-ZZ-BJ-01'}, 
            {value: 'XZ2-01-03-ZZ-BJ-01', label: 'XZ2-01-03-ZZ-BJ-01'},
          ]
        }]
      }
    },
    // components: {
    // 'el-dialog': Dialog
    // },
    // computed:{
    //   transformedValue(){
    //     var status=[]
    //     for(let i = 0;i<this.tableData.length;i++){
    //       status.push(this.tableData[i].equip_status)
    //     }
    //     // console.log(status)
    //     status.forEach((item,index)=>{
    //       switch(item){
    //         case 1:
    //           status[index]='运行';
    //           break;
    //         case 2:
    //           status[index]='待机';
    //           break;
    //         case 3:
    //           status[index]='故障';
    //           break;
    //         case 4:
    //           status[index]='关机';
    //           break;
    //         case 7:
    //           status[index]='待料';
    //           break;
    //         case 8:
    //           status[index]='堵料';
    //           break;
    //         default:
    //           break
    //       }
    //     })
    //     console.log(status)
    //     let equip_status=status.join(',')
    //     console.log(equip_status)
    //     return equip_status
    //   }
    // },
    methods:{
      searchinfo(){
        this.pickdata.starttime=this.valuedata[0]
        this.pickdata.endtime=this.valuedata[1]
        console.log(this.selectitem)
        this.selectitem.forEach((item)=>{
          this.pickdata.selectdata.push(item[1])
        })
        // this.pickdata.selectdata=this.pickdata.selectdata.map(item => item.replace(/'/g, '"'))
        this.pickdata.selectdata=this.pickdata.selectdata.join("','")
        console.log(this.pickdata)
        console.log(this.xAxis)
        console.log(this.yAxis)
        axios.get('/oeedata',{params:this.pickdata}).then(res=>{
        this.tableData=res.data.data
        this.tableData.forEach((item)=>{
          this.xAxis.push(item.equip_code)
          this.yAxis.push(item.last_time)
        })
        this.xAxis=this.xAxis.splice(0,4)
        this.yAxis=this.yAxis.splice(0,4)
        console.log(this.xAxis)
        console.log(this.yAxis)
        console.log(this.tableData)
        console.log(res.data)
        })
        this.pickdata.selectdata=[]
        this.xAxis=[]
        this.yAxis=[]
        // this.tableData.forEach(function(item, index, mystatus){
        //   mystatus[index]=item.equip_status
        //   status.push(mystatus)
        // })
      },
      exportToExcel() {
      // 获取表格的DOM元素
      const table = document.querySelector('#table');
      // 生成工作簿对象
      const wb = XLSX.utils.table_to_book(table);
      // 生成Excel文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        // 使用Blob进行导出
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出的Excel.xlsx');
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
      }
      return wbout;
    },
    handleRowClick(row, column, event) {
      // window.open('http://localhost:8080/#/home/echarts1', "oee柱状图", "width=800,height=400,top = 200, left=400")
      // alert('点击了表格的某个区域');
      this.$router.push('/home/echarts1')
      // this.dialogVisible = true;
      // this.$nextTick(()=>{
      //   var chartDom = document.getElementById('chart');
      //   var myChart = echarts.init(chartDom);
      //   var option= {
      //             title: {
      //                 text: '柱状图动态读取'
      //             },
      //             tooltip: {},
      //             legend: {
      //                 data: ['状态持续时间']
      //             },
      //             xAxis: {
      //                 data: this.xAxis
      //             },
      //             yAxis: {},
      //             series: [
      //                 {
      //                 name: '状态持续时间',
      //                 type: 'bar',
      //                 data: this.yAxis,
      //                 // 柱条的颜色（color）；
      //                 // 柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
      //                 // 柱条圆角的半径（barBorderRadius）；
      //                 // 柱条透明度（opacity）；
      //                 // 阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）
      //                 // itemStyle:{
      //                 //     color:'#91cc75',
      //                 //     // borderType: 'dashed',
      //                 //     opacity: 0.8,
      //                 //     barBorderRadius: 5,
      //                 //     borderWidth: 5,
      //                 //     borderType: 'solid',
      //                 //     borderColor: '#73c0de',
      //                 //     shadowColor: '#5470c6',
      //                 //     shadowBlur: 3,
      //                 //     shadowOffsetX:6,
      //                 //     shadowOffsetY:6
      //                 // }
      //                 }
      //             ]
      //         }
      //   option && myChart.setOption(option);
      // })
    }
    }
  }
</script>